<template>
    <div>
      <el-header>
        <van-nav-bar
          title="咖啡师-考生端"
          right-text="退出登录"
          left-arrow
          @click-left="goBack"
          @click-right="logout"
        />
      </el-header>
      <el-container style="height: max-content;  ">
        <el-aside width="auto" style="height: 100%;background-color: white">
          <div style="font-weight: bold; font-size: large">
            {{ '欢迎进入咖啡师考试系统!' }}<br>
            {{ '请选择工位进入答题。' }}<br>
          </div>
          <el-button class="refresh-btn" @click="onRefresh"
                     type="primary"
                     circle
                     icon="el-icon-refresh"
                     size="large" />
        </el-aside>
        <el-container>
          <el-main>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
              <van-list
                v-model="loading"
                :finished="finished"
                :finished-text="msg"
                @load="onLoad"
              >
                <el-card v-for="item in list" :key="item.id"
                :title="item"
                class="box-card"
                shadow="always"
                @click="toStuScore(e)">
                  <div slot="header" class="clearfix">
      <!--              <span>{{ "位置：" + item.station}}<el-tag style="margin-left: 10px;">{{ "顺序：" + item.orderNum}}</el-tag></span>-->
                    <span style="font-weight: bold; font-size: large">{{ "考试信息：" }}</span>

                    <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="toExam(item)">
                      <el-tag style="font-weight: bold; font-size: large" type="danger" size="large">进入答题</el-tag>
                    </el-button> -->

                    <el-button v-if="item.isFinish === '1'" style="float: right; padding: 3px 0" type="text"
                              @click="toStuScore(item)" disabled
                    >
                      <el-tag type="info">考试结束</el-tag>
                    </el-button>
                    <el-button v-else style="float: right; padding: 3px 0" type="text" @click="toExam(item)">
                      <el-tag style="font-weight: bold; font-size: large" type="danger">进入答题</el-tag>
                    </el-button>

                  </div>
                  <div>
      <!--              <span>{{ "学生编号：" + item.id }}</span>-->
                    <span style="font-weight: bold; font-size: large">{{ "位置：" + item.station}}
                      <el-tag style="margin-left: 10px;font-weight: bold; font-size: large" size="large">{{ "顺序：" + item.orderNum}}</el-tag>
                    </span>

                    <el-divider/>
                  </div>

                </el-card>

              </van-list>


            </van-pull-refresh>
          </el-main>
        </el-container>
      </el-container>
    </div>

  </template>

<script>
import { getExamStationInfo,queryExam } from '@/api/examinee/examinee.js'
export default {
    name: "Examinee",
    data() {
        return {
            examId: null,
            msg: null,
            list: [],
            loading: false,
            finished: false,
            refreshing: false,

        };
    },
    watch: {

    },
    created() {
        // this.getInfoList()
      this.examId = this.$route.query.examId
      this.enterFullscreen()
      queryExam().then(res => {
          console.log("QUERYEXAM:",res)
        })
    },
    methods: {
        enterFullscreen() {
          const element = document.documentElement; // 获取整个文档的根元素

          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.mozRequestFullScreen) { // Firefox
            element.mozRequestFullScreen();
          } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
            element.webkitRequestFullscreen();
          } else if (element.msRequestFullscreen) { // IE/Edge
            element.msRequestFullscreen();
          }
        },
        getInfoList() {
            this.loading = true;

            getExamStationInfo(this.examId).then(response => {
                // console.log("*********", response)
                this.msg = response.msg
                this.list = response.data;
                this.total = response.total;
                this.loading = false;
            }
            ).catch(res => {
                console.log("****ERROR*****", res)
            });
        },


        onLoad() {
            setTimeout(() => {
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                }
                this.getInfoList()
                this.loading = false;
                this.finished = true;

                if (this.list.length >= 40) {
                    this.finished = true;
                }
            }, 1000);
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
        onChangeScore(score,qid){
            // console.log("score value:",value,"AAA;",e)

            updateScore(qid,score).then(res=>{
                console.log("******RES*******",res)
            })
        },
        goBack() {
            this.$router.back()
        },
        async logout() {
            this.$confirm('确定注销并退出系统吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('LogOut').then(() => {
                    location.href = '/index';
                })
            }).catch(() => { });
        },

        orderList(attr) {
            return function (a, b) {
                return a[attr] - b[attr]
            }
        },

        toExam(item){
            // console.log("params:",item.paperId)
            this.$router.push({
                path: '/examinee/exam',
                query: {
                    paperId: item.paperId,
                    station: item.station,
                    studentLoginName: item.studentLoginName,
                    startTime: item.startTime,
                    endTime: item.endTime
                }
            })
        }


    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.refresh-btn {
  position: fixed;
  bottom: 90px;
  /* 样式可根据需求自定义 */
}
.footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}
</style>
